<template>
    <div class="form">
        <el-form
            label-position="top"
            label-width="100px"
            :model="form"
            class="formbox"
            ref="myform"
        >
            <el-form-item
                prop="phone"
                label="手机号码"
                :rules="[{required:true,message:'手机号码必填'},{pattern:reg.phone,message:'请填写正确的手机号码'}]"
            >
                <el-col :span="24">
                    <el-input v-model="form.phone" placeholder='请输入手机号码' clearable :prefix-icon="Iphone" > </el-input>
                </el-col>
            </el-form-item>
            <el-form-item
                prop="captcha"
                label="验证号码"
                :rules="[{required:true,message:'验证号码必填'},{pattern:reg.code,message:'请填写4位正确的验证码'}]"
            >
                <el-row>
                    <el-col :span="17" >
                        <el-input v-model="form.captcha" placeholder='请输入验证号码' clearable :prefix-icon="Coin" > </el-input>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-button type="primary" v-if="flag" :disabled="!disabled" @click="todoSendCaptcha">发送验证码</el-button>
                        <el-button type="default" v-else  disabled >剩余 {{count}} S</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
             <el-form-item class="lastitem">
                <div class="alinks">
                    <router-link  class="litem" :to="{name:'register'}">没有账号,去注册!</router-link>
                    <router-link  class="litem bg" :to="{name:'forgetpass'}">忘记密码</router-link>
                </div>
            </el-form-item>

            <el-form-item>
                <el-button block type="success" class="btnblock" @click="startLogin">登录</el-button>
                <el-button block type="danger" class="btnblock" @click="resetFields">重置</el-button>
            </el-form-item>
        </el-form> 
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted ,computed ,ref } from 'vue'
import {Iphone,Coin} from '@element-plus/icons-vue'
import {reg} from "@/utils/validate"
import {ajax} from "@/api"
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
var timer = null;
export default {
    setup(props){
        const myform = ref()
        const router = useRouter()
        const state = reactive({
            form:{},
            Iphone,
            Coin,   
            count:120,
            flag:true 
        })
        const {proxy} = getCurrentInstance()
        onMounted(()=>{
            const {phone} = proxy.$root.$route.query 
            if(phone){
                state.form.phone  = phone ;
            }
        })
        const resetFields = ()=> {
            myform.value.resetFields()
        }
        const disabled = computed(()=>reg.phone.test(state.form.phone))
        const todoSendCaptcha = async ()=>{
            timeDown()
            let res = await ajax.sendcaptcha({
                phone:state.form.phone 
            })
        }
        const startLogin = ()=>{
            myform.value.validate(async valid=>{
                if(valid){
                    let  res = await ajax.chechcaptcha(state.form)
                    if(res.code==200){
                        router.push({name:'main'})
                        localStorage.setItem('phone',state.form.phone)
                    }
                }else{
                    ElMessage.error("请输入有效的登录信息 ")
                }
            })
        }
        const timeDown = ()=>{
            state.flag = false;
            state.count--;
            timer = setInterval(()=>{
                if(state.count>0){
                    state.count--;
                    state.flag = false;
                }else{
                    clearInterval(timer)
                    timer = null
                    state.flag = true;
                    state.count = 120;
                }
            },1000)
        }
        return {
            ...toRefs(state),
            disabled,
            todoSendCaptcha,
            myform,
            resetFields,
            startLogin
        }
    }
}
</script>